<template>
    <el-dialog :width="1200" destroy-on-close draggable :title="dialogTitle" v-model="reviseDialogFormVisible">
        <el-form :model="reviseParam" :rules="addRules" ref="custForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="Vessel Name" label-width="120px" prop="vesselName" required>
                <el-select v-model="reviseParam.vesselName" filterable placeholder="choose bookingNo" >
                  <el-option :key="item.bookingNo" :label="item.bookingNo" :value="item.bookingNo" v-for="item in reviseParam.bookings">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="Port Code" label-width="120px" prop="portCode" required>
                  <el-select v-model="reviseParam.portCode" filterable placeholder="choose bookingNo" >
                    <el-option :key="item.bookingNo" :label="item.bookingNo" :value="item.bookingNo" v-for="item in reviseParam.bookings">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="POL" label-width="120px" prop="pol" required>
                  <el-select v-model="reviseParam.pol" filterable placeholder="choose bookingNo" >
                    <el-option :key="item.bookingNo" :label="item.bookingNo" :value="item.bookingNo" v-for="item in reviseParam.bookings">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="POD" label-width="120px" prop="pod" required>
                  <el-select v-model="reviseParam.pod" filterable placeholder="choose bookingNo" >
                    <el-option :key="item.bookingNo" :label="item.bookingNo" :value="item.bookingNo" v-for="item in reviseParam.bookings">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="Brand" label-width="120px" prop="carrierCode" required>
                  <el-select v-model="reviseParam.brand" filterable allow-create placeholder="choose bookingNo" >
                    <el-option :key="item.bookingNo" :label="item.bookingNo" :value="item.bookingNo" v-for="item in reviseParam.bookings">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer"> 
         <el-button type="primary" :loading="isLoading" @click="backListHandel">Back</el-button>
        <el-button type="primary" :loading="isLoading" @click="submitApplyForm">Apply</el-button> 
      </div>
      </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const dialogTitle=ref('BookingNo Apply') 
const addRules = ref({
//   carrier: [{ required: true, message: "carrier is required" }],
//   voyageNo: [{ required: true, message: "voyage is required" }],
//   defultRule: [
//     {
//       required: true,
//       message: "Mandatory Field"
//     }
//   ]
});
const reviseParam = {
  id: null,
  carrier: null,
  carrierCode: null,
  voyageNo: null,
  vesselName: null,
  vesselCode: null,
  portCode: null,
  bookings: [] as any
};
const reviseDialogFormVisible= ref(false);
const applyInit=(initForm)=>{
    reviseDialogFormVisible.value = true;    
}
defineExpose({
  applyInit
});
</script>
<style scoped lang='scss'>
::v-deep(.el-form-item__label){
    line-height: 2.5 !important;
}
</style>
